<template>
	<div class="topbar">
		<van-nav-bar
			title="商品详情"
			left-text="返回"
			left-arrow
			fixed
			@click-left="$router.back(-1)"
			@click-right="showShare = true"
		>
			<template #right>
				<van-icon name="share-o" size="18" />
			</template>
		</van-nav-bar>
		
		<van-share-sheet 
			v-model="showShare"
			title="立即分享给好友"
			:options="options"
		/>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				// 显示隐藏分享组件
				showShare: false,
				// 分享选项
				options: [
				  { name: '微信', icon: 'wechat' },
				  { name: '微博', icon: 'weibo' },
				  { name: '复制链接', icon: 'link' },
				  { name: '分享海报', icon: 'poster' },
				  { name: '二维码', icon: 'qrcode' }
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topbar{
		height: 46px;
	}
</style>